<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link href="css/layui.css" rel="stylesheet">
    <link href="dist/gridstack.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="head layui-row">
    <div class="layui-col-xs6">
        <img src="images/logo.png" id="logo"/>
    </div>
    <div class="layui-col-xs6" style="text-align: right">
        <div class="search-box">
            <input id="search" placeholder="Search"/>
            <i class="icon-search"></i>
            <i class="icon-add-paper" onclick="addNew()"></i>
            <i class="icon-setting"></i>
            <label id="username">Ttmny</label>
        </div>

    </div>
</div>
<div class="main-container" id="box">
    <div class="top-btn-box">
        <!--<a href="oil.html">--><input class="btn1" type="button" value="Crude Oil"/><!--</a>-->
        <input class="btn1" type="button" value="Peak And Valley"/>
        <input class="btn1 selected" type="button" value="Stock"/>
        <input class="btn1" type="button" value="Gold"/>
    </div>
    <div class="main-box">
        <div class="grid-stack">
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="8" data-gs-height="6">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Shanghai Composite Index</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body" id="indexChart"></div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="6">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Shanghai Composite Index</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line">
                                <!--<colgroup>-->
                                <!--<col width="20%">-->
                                <!--<col width="30%">-->
                                <!--<col width="20%">-->
                                <!--<col width="30%">-->
                                <!--</colgroup>-->
                                <tbody>
                                <tr>
                                    <td>Volume</td>
                                    <td>{{indexData.Volume}}</td>
                                    <td>Last Close</td>
                                    <td class="color-red">{{indexData.LastClose}}</td>
                                </tr>
                                <tr>
                                    <td>Newest</td>
                                    <td class="color-green">{{indexData.NewPrice}}</td>
                                    <td>Opening</td>
                                    <td class="color-red">{{indexData.Open}}</td>
                                </tr>
                                <tr>
                                    <td>Highest</td>
                                    <td class="color-red">{{indexData.High}}</td>
                                    <td>Minimum</td>
                                    <td class="color-green">{{indexData.Low}}</td>
                                </tr>
                                <tr>
                                    <td>{{indexData.flag ? 'Increase' : 'Reduce'}}</td>
                                    <td :class="indexData.color">{{indexData.PriceChangeRatio}}</td>
                                    <td>Rise or fall</td>
                                    <td :class="indexData.color">
                                        {{(indexData.NewPrice - indexData.Open).toFixed(2)}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Amount</td>
                                    <td>{{indexData.Amount}}</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Purchase quantity</td>
                                    <td></td>
                                    <td>{{indexData.BV1}}</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Sales quantity</td>
                                    <td></td>
                                    <td>{{indexData.SV1}}</td>
                                    <td></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" v-for="item in tips" :data-gs-x="item.x" :data-gs-y="item.y"
                 :data-gs-width="item.width" :data-gs-height="item.height">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>{{item.title}}</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body" :id="'chart' + item.index"></div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="0" data-gs-y="10" data-gs-width="4" :data-gs-height="4">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Ranking of Stocks</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Increase</th>
                                    <th>Newest</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="increase" v-for="item in increaseData">
                                    <td>{{item[2]}}</td>
                                    <td style="text-align: center">{{item[3]}}
                                        <i style="right: 18px"></i>
                                    </td>
                                    <td style="text-align: center">{{item[5]}}%</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="4" data-gs-y="10" data-gs-width="4" data-gs-height="4">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Ranking of Stocks by Concept</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line" style="width: 100%;height:auto;overflow:auto;">
                                <colgroup>
                                    <col width="40%">
                                    <col width="25%">
                                    <col width="35%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>Plate</th>
                                    <th style="text-align: center">Coupon</th>
                                    <th style="text-align: right">Shares</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="increase" v-for="item in conceptIncreaseData">
                                    <td>{{item.NAME.length > 7 ? item.NAME.substring(0, 6) + '...' : item.NAME }}</td>
                                    <td>{{(item.PERCENT * 100).toFixed(2)}}%<i></i></td>
                                    <td>{{item.MAXPERCENTSTOCK.NAME.length > 6 ?
                                        item.MAXPERCENTSTOCK.NAME.substring(0,6) + '...' : item.MAXPERCENTSTOCK.NAME}}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!--<table class="layui-table" lay-skin="line" style="width: 50%;float: left">-->
                            <!--<colgroup>-->
                            <!--<col width="40%">-->
                            <!--<col width="25%">-->
                            <!--<col width="35%">-->
                            <!--</colgroup>-->
                            <!--<thead>-->
                            <!--<tr>-->
                            <!--<th style="border-left: 1px solid #3e3e3e">Plate</th>-->
                            <!--<th style="text-align: center">Coupon</th>-->
                            <!--<th style="text-align: right">Shares</th>-->
                            <!--</tr>-->
                            <!--</thead>-->
                            <!--<tbody>-->
                            <!--<tr class="increase" v-for="item in industryIncreaseData">-->
                            <!--<td style="border-left: 1px dashed #3e3e3e">-->
                            <!--{{item.NAME.length > 7 ? item.NAME.substring(0, 7) + '...' : item.NAME }}-->
                            <!--</td>-->
                            <!--<td>{{(item.PERCENT * 100).toFixed(2)}}%<i></i></td>-->
                            <!--<td>{{item.MAXPERCENTSTOCK.NAME.length > 7 ?-->
                            <!--item.MAXPERCENTSTOCK.NAME.substring(0,6) + '...' : item.MAXPERCENTSTOCK.NAME}}-->
                            <!--</td>-->
                            <!--</tr>-->
                            <!--</tbody>-->
                            <!--</table>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="8" data-gs-y="6" data-gs-width="4" data-gs-height="8">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Major Stock Index</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="tip-table-box">
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="47%">
                                    <col width="27%">
                                    <col width="26%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th style="text-align: center">Last</th>
                                    <th style="text-align: center">%CH</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr :class="item.PriceChangeRatio > 0 ? 'increase' : 'reduce'"
                                    v-for="item in stockData">
                                    <td>{{item.Name.length > 25 ? item.Name.substring(0, 23)+'...' : item.Name}}</td>
                                    <td style="text-align: center">{{item.NewPrice}}
                                        <i style="right: 18px"></i>
                                    </td>
                                    <td style="text-align: center">{{item.PriceChangeRatio}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-stack-item" data-gs-x="0" :data-gs-y="20" data-gs-width="12" :data-gs-height="7">
                <div class="grid-stack-item-content tip-box">
                    <div class="tip-title">
                        <label>Preface Information</label>
                        <i class="icon-edit"></i>
                        <i class="icon-close"></i>
                    </div>
                    <div class="tip-body">
                        <div class="top-btn-box">
                            <input class="btn1" type="button" value="Revenues"/>
                            <input class="btn1" type="button" value="Credit Rating"/>
                            <input class="btn1" type="button" value="M&A"/>
                            <input class="btn1" type="button" value="Asset"/>
                            <input class="btn1" type="button" value="Balance of Payment"/>
                        </div>
                        <div class="table-box">
                            <div class="page">
                                <table class="layui-table" lay-skin="line" style="width: 49%;float: left">
                                    <tbody>
                                    <tr v-for="(item, index) in tableData" @click="gotoNewsDetail(item)"
                                        v-if="index < 10">
                                        <td width="22%">{{item.created}}</td>
                                        <td width="70%" style="overflow: hidden;white-space:nowrap;word-break:keep-all;">{{item.titleSrc.substring(0, 45)}}</td>
                                        <td width="8%" v-html="sentiment(item.sentiment)"></td>
                                        <!--<td>{{item.view}}</td>-->
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="split-line"></div>
                                <table class="layui-table" lay-skin="line" style="width: 49%;float: right">
                                    <tbody>
                                    <tr v-for="(item, index) in tableData" @click="gotoNewsDetail(item)"
                                        v-if="index > 9">
                                        <td width="22%">{{item.created}}</td>
                                        <td width="70%" style="overflow: hidden;white-space:nowrap;word-break:keep-all;">{{item.titleSrc.substring(0, 45)}}</td>
                                        <td width="8%" v-html="sentiment(item.sentiment)"></td>
                                        <!--<td>{{item.view}}</td>-->
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="js/jquery-1.7.min.js"></script>

<script src="js/jquery-ui.min.js"></script>
<script src="js/layui/layui.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/knockout-min.js"></script>
<script src="dist/gridstack.js"></script>
<script src="js/gAjax.js"></script>
<script>
    function jQuery112406243328094571283_1542448804941(d) { // 涨幅回掉
        var data = [];
        var en = ["Guangzhou Dail...", "Prolto", "Xinhua Media", "Tianfeng Securiti...", "Hongdu Aviation"];
        for (var i = 0; i < 5; i++) {
            var item = d.data[i];
            var arr = item.split(",");
            arr[2] = en[i];
            data.push(arr);
        }

        /* d.data.forEach(function (item) {
             var arr = item.split(',');

             data.push(arr);
         });*/
        mainVue.increaseData = data;

    }
</script>
<script type="text/javascript">
    function addNew() {
        window.location.href = "view/messageComputing.html";
    }

    $(function () {
        var options = {};
        $('.grid-stack').gridstack(options);
        var grid = $('.grid-stack').data('gridstack');
        mainVue.grid = $('.grid-stack').data('gridstack');
        mainVue.initChartHeight();

        var chartJson = getUrlParam("chartJson");
        if (chartJson && chartJson.length > 0) {
            mainVue.addTipForLargeMarketForecast();
        }

        $('.icon-close').click(function () {
            var $tip = $(this).parents(".grid-stack-item");
            grid.remove_widget($tip)
        });
    });
    var indexChart, chart2, chart3;
    Vue.prototype.sentiment = function (value) {
        var msg = "Neutral"
        if (value == -2) {
            msg = "Negative+";
        } else if (value == -1) {
            msg = "Negative";
        } else if (value == 1) {
            msg = "Positive";
        } else if (value == 2) {
            msg = "Positive+";
        }
        return msg;
    };
    var layer = null;
    layui.use('layer', function(){
        layer = layui.layer;
    });
    var mainVue = new Vue({
        el: '#box',
        data: {
            grid: {},
            increaseData: [], // 涨幅
            conceptIncreaseData: [], // 概念涨幅
            industryIncreaseData: [], // 行业涨幅
            stockData: [], // 前50证券涨跌
            indexData: {}, // 上证指数
            tips: [/*{title: "Large Market Forecast", x: 0, y: 6, width: 4, height: 4, index: 2},*/
                {title: "Stock Market Sentiment Index", x: 0, y: 6, width: 8, height: 4, index: 3},
                /*{title: "Water And Energy Consumption In Beijing", x: 0, y: 15, width: 6, height: 5, index: 4},
                {title: "Zhejiang Hangzhou Visitor Index Peak And Valley", x: 6, y: 15, width: 6, height: 5, index: 5}*/],
            tableData: []
        },
        created: function () {
            var chartJson = getUrlParam("chartJson");
            if (chartJson && chartJson.length > 0) {
                this.tips = [{title: "Stock Market Sentiment Index", x: 4, y: 6, width: 4, height: 4, index: 3}];
            }
        },
        mounted: function () {
            var _this = this;
        },
        methods: {
            gotoNewsDetail: function (item) {
                layer.open({
                    title: "jove arch",
                    type: 2,
                    content: "view/newsDetail_spare.html?uuid=" + item.uuid,
                    area: ['1200px', '600px']
                });
                /*window.open("view/newsDetail.html?uuid=" + item.uuid);*/
            },
            getIncreaseData: function () { // 涨幅
                var _this = this;
                var url = 'http://nufm.dfcfw.com/EM_Finance2014NumericApplication/JS.aspx?cb=jQuery112406243328094571283_1542448804941&type=CT&token=4f1862fc3b5e77c150a2b985b12db0fd&sty=FCOIATC&js=(%7Bdata%3A%5B(x)%5D%2CrecordsFiltered%3A(tot)%7D)&cmd=C._A&st=(ChangePercent)&sr=-1&p=1&ps=20&_=1542448804942';
                $.ajax({
                    url: url, //不指定回调名，可省略callback参数，会由jQuery自动生成
                    dataType: 'jsonp',
                    success: function (data) {
                        console.log(data);
                    }
                });

            },
            getConceptIncreaseData: function () { // 概念涨幅
                var _this = this;
                var url = 'http://quotes.money.163.com/hs/realtimedata/service/plate.php?host=/hs/realtimedata/service/plate.php&page=0&query=TYPE:GAINIAN&fields=RN,NAME,STOCK_COUNT,PE,LB,HSL,PERCENT,TURNOVER,VOLUME,PLATE_ID,TYPE_CODE,PRICE,UPNUM,DOWNNUM,MAXPERCENTSTOCK,MINPERCENTSTOCK&sort=PERCENT&order=desc&count=5&type=query&callback=callback_1792076604&req=61445';
                $.ajax({
                    url: url, //不指定回调名，可省略callback参数，会由jQuery自动生成
                    dataType: 'jsonp',
                    success: function (data) {
                        _this.conceptIncreaseData = data.list;
                    }
                });
                /*$.get('json/spare_stock/major_exchange_rate.json', function (data) {
                    _this.conceptIncreaseData = data;
                });*/
            },
            getIndustryIncreaseData: function () { // 行业涨幅
                var _this = this;
                var url = 'http://quotes.money.163.com/hs/realtimedata/service/plate.php?host=/hs/realtimedata/service/plate.php&page=0&query=TYPE:HANGYE&fields=RN,NAME,STOCK_COUNT,PE,LB,HSL,PERCENT,TURNOVER,VOLUME,PLATE_ID,TYPE_CODE,PRICE,UPNUM,DOWNNUM,MAXPERCENTSTOCK,MINPERCENTSTOCK&sort=PERCENT&order=desc&count=5&type=query&callback=callback_1792076604&req=61445';
                $.ajax({
                    url: url, //不指定回调名，可省略callback参数，会由jQuery自动生成
                    dataType: 'jsonp',
                    success: function (data) {
                        _this.industryIncreaseData = data.list;
                    }
                });
                /*$.get('json/spare_stock/major_exchange_rate2.json', function (data) {
                    _this.industryIncreaseData = data;
                });*/
            },
            getIndexData: function () { // 上证指数
                var _this = this;
                $.get("http://ds.jctytech.com/stock.php?u=13501222321&symbol=SH000001&type=stock", function (result) {
                    result[0].Amount = Math.ceil(result[0].Amount / 1000000000) + " billions";
                    result[0].flag = result[0].PriceChangeRatio > 0 ? true : false;
                    result[0].color = result[0].PriceChangeRatio > 0 ? 'color-red' : 'color-green';
                    _this.indexData = result[0];
                });
            },
            getStockData: function () { // 前50证券涨跌
                var _this = this;
                $.get("http://ds.jctytech.com/stock.php?u=13501222321&market=IXIX&type=stock", function (result) {
                    _this.stockData = result.slice(0, result.length > 14 ? 14 : result.length);
                });
                /*$.get('json/spare_stock/major_stock_index.json', function (result) {
                    _this.stockData = result.slice(0, result.length > 14 ? 14 : result.length);
                });*/
            },
            addTipForLargeMarketForecast: function () {
                var title = getUrlParam("name")?getUrlParam("name") : "undefined";
                /*if (localStorage.getItem("name") == null || localStorage.getItem("name2") == null) {
                    title = "SSE-R";
                } else {
                    title = localStorage.getItem("name") + "-" + localStorage.getItem("name2");
                }*/
                var html = "<div class='grid-stack-item' data-gs-x='0' data-gs-y='6' data-gs-width='4' data-gs-height='4'>\n" +
                    "                <div class='grid-stack-item-content tip-box'>\n" +
                    "                    <div class='tip-title'>\n" +
                    "                        <label>"+title+"</label>\n" +
                    "                        <i class='icon-edit'></i>\n" +
                    "                        <i class='icon-close'></i>\n" +
                    "                    </div>\n" +
                    "                    <div class='tip-body' id='newChart1'>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "            </div>"
                this.grid.add_widget($(html), 0, 6, 4, 4);
                mainVue.initChartHeight($("#newChart1"));
                var chart2 = echarts.init(document.getElementById("newChart1"));
                this.initChart2(chart2);

            },
            addTip: function (chartJson) {
                var chartObj = JSON.parse(chartJson);
                console.log(chartObj)
                var html = "<div class='grid-stack-item' data-gs-x='4' data-gs-y='10' data-gs-width='4' data-gs-height='4'>\n" +
                    "                <div class='grid-stack-item-content tip-box'>\n" +
                    "                    <div class='tip-title'>\n" +
                    "                        <label>New Tip</label>\n" +
                    "                        <i class='icon-edit'></i>\n" +
                    "                        <i class='icon-close'></i>\n" +
                    "                    </div>\n" +
                    "                    <div class='tip-body' id='newChart'>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "            </div>"
                this.grid.add_widget($(html), 0, 0, 12, 5);
                mainVue.initChartHeight($("#newChart"));
                var newChart = echarts.init(document.getElementById("newChart"));

                var data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

                var dateList = chartObj.xAxis;
                var valueList = chartObj.data;
                var xAxis = [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666',
                            fontSize: '14',
                            fontWeight: 800
                        }
                    }, data: dateList
                }];
                var yAxis = [{
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666',
                            fontSize: '14',
                            fontWeight: 800
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(51, 51, 51, 0.7)'
                        }
                    }
                }];
                var series = [{
                    type: chartObj.type,
                    showSymbol: false,
                    data: valueList,
                    lineStyle: {
                        color: 'rgba(18, 143, 255, 1)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(18, 143, 255, 1)'
                        }, {
                            offset: 1,
                            color: 'rgba(18, 143, 255, 0.2)'
                        }])
                    },
                }];
                newChart.setOption(this.getOptionByParams(null, xAxis, yAxis, series));

            },
            initChartHeight: function ($tipBody) {//初始化chart容器高度, 初始化echarts
                var _this = this;
                if ($tipBody) { // 单独初始化
                    $tipBody.height($tipBody.parents(".tip-box").height() - 40);
                } else { // 群体初始化
                    $(".tip-body").each(function () {
                        $(this).height($(this).parents(".tip-box").height() - 40);
                    });

                    _this.getStockData(); // 获取前50证券涨跌
                    _this.getIndexData(); // 获取上证指数
                    _this.getIncreaseData(); // 获取涨幅
                    _this.getConceptIncreaseData(); // 获取概念涨幅值
                    _this.getIndustryIncreaseData(); // 获取行业涨幅

                    indexChart = echarts.init(document.getElementById("indexChart"));
                    /*chart2 = echarts.init(document.getElementById("chart2"));*/
                    chart3 = echarts.init(document.getElementById("chart3"));

                    _this.initIndexChart();
                    /*_this.initChart2();*/
                    _this.initChart3();
                    setInterval(function () {
                        /*_this.initIndexChart();*/
                        _this.getStockData(); // 获取前50证券涨跌
                        /*_this.getIndexData(); // 获取上证指数
                        _this.getIncreaseData(); // 获取涨幅
                        _this.getConceptIncreaseData(); // 获取概念涨幅值
                        _this.getIndustryIncreaseData(); // 获取行业涨幅*/
                    }, 10000);
                    $.post('http://test.crgood.cn/Article/FinanceControllerV2/finance.do', {
                        op_type: "EMOTION_FACTOR_NEWS",
                        direction: "east"
                    }, function (data) {
                        var newsList = (data.data.List.returndata.resultList).splice(0,20);
                        newsList.forEach(function (item) {
                            item.sentiment = parseInt(Math.random()*5) -2;
                        });
                        console.log(newsList);
                        _this.tableData = newsList;
                        setInterval(function () {
                            var data = _this.tableData[0];
                            _this.tableData.splice(0,1);
                            _this.tableData.push(data);
                        }, 1700);
                    });
                }
            },
            initIndexChart: function () { // 上证综合指数
                var _this = this;
                /*$.get('http://ds.jctytech.com/stock.php?u=13501222321&symbol=SH000001&type=trend', function (rawData) {
                    var upColor = '#05cb91';
                    var downColor = '#f54f77';
                    _this.getOption(rawData, upColor, downColor);
                });*/
                $.get('http://ds.jctytech.com/stock.php?u=test&symbol=SH000001&type=trend', function (rawData) {
                    var upColor = '#f54f77';
                    var downColor = '#05cb91';
                    console.log(rawData);
                    _this.getOption(rawData, upColor, downColor);
                });
            },

            getOption: function (data, upColor, downColor) {
                var _this = this;
                var xData = ["9:30", "9:31", "9:32", "9:33", "9:34", "9:35", "9:36", "9:37", "9:38", "9:39", "9:40", "9:41", "9:42", "9:43", "9:44", "9:45", "9:46", "9:47", "9:48", "9:49", "9:50", "9:51", "9:52", "9:53", "9:54", "9:55", "9:56", "9:57", "9:58", "9:59", "10:00", "10:1", "10:2", "10:3", "10:4", "10:5", "10:6", "10:7", "10:8", "10:9", "10:10", "10:11", "10:12", "10:13", "10:14", "10:15", "10:16", "10:17", "10:18", "10:19", "10:20", "10:21", "10:22", "10:23", "10:24", "10:25", "10:26", "10:27", "10:28", "10:29", "10:30", "10:31", "10:32", "10:33", "10:34", "10:35", "10:36", "10:37", "10:38", "10:39", "10:40", "10:41", "10:42", "10:43", "10:44", "10:45", "10:46", "10:47", "10:48", "10:49", "10:50", "10:51", "10:52", "10:53", "10:54", "10:55", "10:56", "10:57", "10:58", "10:59", "11:00", "11:1", "11:2", "11:3", "11:4", "11:5", "11:6", "11:7", "11:8", "11:9", "11:10", "11:11", "11:12", "11:13", "11:14", "11:15", "11:16", "11:17", "11:18", "11:19", "11:20", "11:21", "11:22", "11:23", "11:24", "11:25", "11:26", "11:27", "11:28", "11:29", "11:30/13:00", "13:1", "13:2", "13:3", "13:4", "13:5", "13:6", "13:7", "13:8", "13:9", "13:10", "13:11", "13:12", "13:13", "13:14", "13:15", "13:16", "13:17", "13:18", "13:19", "13:20", "13:21", "13:22", "13:23", "13:24", "13:25", "13:26", "13:27", "13:28", "13:29", "13:30", "13:31", "13:32", "13:33", "13:34", "13:35", "13:36", "13:37", "13:38", "13:39", "13:40", "13:41", "13:42", "13:43", "13:44", "13:45", "13:46", "13:47", "13:48", "13:49", "13:50", "13:51", "13:52", "13:53", "13:54", "13:55", "13:56", "13:57", "13:58", "13:59", "14:00", "14:1", "14:2", "14:3", "14:4", "14:5", "14:6", "14:7", "14:8", "14:9", "14:10", "14:11", "14:12", "14:13", "14:14", "14:15", "14:16", "14:17", "14:18", "14:19", "14:20", "14:21", "14:22", "14:23", "14:24", "14:25", "14:26", "14:27", "14:28", "14:29", "14:30", "14:31", "14:32", "14:33", "14:34", "14:35", "14:36", "14:37", "14:38", "14:39", "14:40", "14:41", "14:42", "14:43", "14:44", "14:45", "14:46", "14:47", "14:48", "14:49", "14:50", "14:51", "14:52", "14:53", "14:54", "14:55", "14:56", "14:57", "14:58", "14:59", "15:00"];
                /*var xData = [];
                var date = new Date();
                var dateStr = (date.getMonth() + 1) + '-' + date.getDate();
                xData0.forEach(function (item) {// 添加今日日期到时分秒
                    xData.push(dateStr + ' ' + item);
                });*/
                var trendData = [data.Data[0].Trend];
                var amountData = [0];
                var averageData = [data.Data[0].Average];
                console.log(data);
                var lastTrend = -1;
                data.Data.forEach(function (item) {
                    trendData.push(item.Trend);
                    averageData.push(item.Average);
                    // 比较此刻trend和上一次trend,涨跌区分颜色
                    var color = upColor;
                    if (lastTrend > -1 && lastTrend > item.Trend) {
                        color = downColor;
                    }
                    lastTrend = item.Trend;
                    amountData.push({
                        value: item.Volume,
                        itemStyle: {
                            color: color
                        }
                    });
                });
                indexChart.setOption({
                    backgroundColor: '#1a1a1c',
                    animation: false,
                    title: {
                        text: 'Timeshare Volume: ' + _this.indexData.Volume,
                        top: '60%',
                        left: "25",
                        textStyle: {
                            fontSize: '12',
                            color: '#666',
                            fontWeight: 800
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        backgroundColor: 'rgba(245, 245, 245, 0.8)',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        }
                    },
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    toolbox: {
                        show: false
                    },
                    legend: {
                        data: ["Index", "Average"],
                        textStyle: {
                            color: '#878787',
                        },
                        right: 25,
                        icon: "rect",
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 40
                    },
                    visualMap: {
                        show: false,
                        seriesIndex: 5,
                        dimension: 2,
                        pieces: [{
                            value: 1,
                            color: downColor
                        }, {
                            value: -1,
                            color: upColor
                        }]
                    },
                    grid: [{
                        height: '50%',
                        top: "35px",
                        left: '30px',
                        right: '30px',
                        containLabel: true
                    }, {
                        top: "70%",
                        left: '30px',
                        right: '30px',
                        bottom: '0px',
                        containLabel: true
                    }],
                    xAxis: [{
                        type: 'category',
                        data: xData,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            },
                            interval: 29
                        },
                        interval: 29
                    }, {
                        show: false,
                        type: 'category',
                        data: xData,
                        gridIndex: 1,
                        scale: true,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            },
                            interval: 29
                        },
                        interval: 29,
                        axisPointer: {
                            z: 100
                        }
                    }],
                    yAxis: [{
                        axisLine: {show: false},
                        scale: true,
                        splitLine: {
                            lineStyle: {
                                color: '#2c2c2d',
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        splitArea: {
                            show: false
                        }
                    }, {
                        scale: true,
                        gridIndex: 1,
                        splitNumber: 2,
                        axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            },
                            formatter: function (val) {
                                return (parseFloat(val / 10000)).toFixed(0) + '万';
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2c2c2d',
                                type: 'dashed'
                            }
                        },
                    }],
                    series: [{
                        name: 'Average',
                        type: 'line',
                        symbol: 'none',
                        data: averageData,
                        xAxisIndex: 0,
                        smooth: true,
                        itemStyle: {
                            color: '#ebc142'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(180, 155, 80, 0.15)'
                            }, {
                                offset: 1,
                                color: 'rgba(235, 193, 66, 0)'
                            }])
                        }
                    }, {
                        name: 'Index',
                        type: 'line',
                        symbol: 'none',
                        data: trendData,
                        xAxisIndex: 0,
                        smooth: true,
                        itemStyle: {
                            color: '#128dfb'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(25, 46, 67, 0.4)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 143, 255, 0)'
                            }])
                        }
                    }, {
                        name: 'Volume',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        barMaxWidth: 3,
                        data: amountData
                    }]
                }, true);
            },
            initChart2: function (chart2) {
                $.get('json/large_market_forecast2.json', function (rowData) {
                    var xData = rowData.data;
                    var actualData = rowData.actual;
                    var predictedData = rowData.predicted;
                    var marketPsychData = rowData.marketPsych;
                    var sentimentData = rowData.sentiment;
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                        },
                        legend: {
                            right: 20,
                            textStyle: {
                                color: '#878787',
                            },
                            icon: "rect",
                            itemWidth: 10,
                            itemHeight: 10,
                            data: ["Actual Value", "Predicted Value", 'MarketPsych', 'Sentiment']
                        },
                        color: ['#128fff', '#05cb91', '#fcc761', '#f54f77'],
                        grid: {
                            top: "40px",
                            left: '30px',
                            right: '35px',
                            bottom: '10px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {show: false},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            data: xData
                        },
                        yAxis: [{
                            axisLine: {show: false},
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            min: function (value) {
                                return value.min - 150;
                            },
                            max: function (value) {
                                return value.max + 150;
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        }, {
                            axisLine: {show: false},
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#666',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        }],
                        /* dataZoom: [{
                             type: 'inside',
                             start: 96,
                             end: 100
                         }],*/
                        series: [{
                            name: "Actual Value",
                            type: 'line',
                            showSymbol: false,
                            data: actualData,
                            lineStyle: {
                                color: '#128fff'
                            }
                        }, {
                            name: "Predicted Value",
                            type: 'line',
                            showSymbol: false,
                            data: predictedData,
                            lineStyle: {
                                color: '#05cb91'
                            }
                        }, {
                            yAxisIndex: 1,
                            name: 'MarketPsych',
                            type: 'line',
                            showSymbol: false,
                            data: marketPsychData,
                            lineStyle: {
                                color: '#fcc761'
                            },
                        }, {
                            yAxisIndex: 1,
                            name: 'Sentiment',
                            type: 'line',
                            showSymbol: false,
                            data: sentimentData,
                            lineStyle: {
                                color: '#f54f77'
                            }
                        }]
                    };

                    chart2.setOption(option);
                });
            },
            initChart3: function () {
                var _this = this;
                $.get('json/stock_market_sentiment_index2.json', function (rowData) {
                    var xData = rowData.data;
                    var riskData = rowData.risk;
                    var policyData = rowData.policy;
                    var marketPsychData = rowData.marketPsych;
                    var tooltip = {
                        /*trigger: 'axis',
                        formatter: function (params) {
                            params = params[0];
                            return params.name + '<br/>' + "<div style='color: #128FFF'>" + "Stock Index: " + params.value + "</div>";
                        }*/
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    };
                    var legend = {
                        textStyle: {
                            color: '#878787',
                        },
                        right: 20,
                        icon: "rect",
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 20,
                        data: ["Policy factor", "Risk control factor", "MarketPsych"]
                    };
                    var colorArr = ["#128fff", "#05cb91", "#fcc761"];
                    var xAxis = [{
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        data: xData
                    }];
                    var yAxis = [{
                        axisLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#666',
                                fontSize: '14',
                                fontWeight: 800
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(51, 51, 51, 0.7)'
                            }
                        },
                    }];
                    var series = [{
                        name: "Policy factor",
                        type: 'line',
                        showSymbol: false,
                        data: riskData,
                        lineStyle: {
                            color: '#128fff'
                        }/*,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(18, 143, 255, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 143, 255, 0)'
                            }])
                        }*/
                    }, {
                        name: "Risk control factor",
                        type: 'line',
                        showSymbol: false,
                        data: policyData,
                        lineStyle: {
                            color: '#05cb91'
                        }
                    }, {
                        name: "MarketPsych",
                        type: 'line',
                        showSymbol: false,
                        data: marketPsychData,
                        lineStyle: {
                            color: '#ebc142'
                        },
                    }];
                    chart3.setOption(_this.getOptionByParams(tooltip, xAxis, yAxis, series, legend, colorArr));
                });
            },
            getOptionByParams: function (tooltip, xAxis, yAxis, series, legend, colorArr) { //根据x,y轴和数据生成option
                var option = {
                    tooltip: tooltip,
                    /*toolbox: { //工具栏
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: magicTypeArr},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },*/
                    color: colorArr,
                    legend: legend,
                    grid: {
                        top: "40px",
                        left: '30px',
                        right: '35px',
                        bottom: '10px',
                        containLabel: true
                    },
                    xAxis: xAxis,
                    yAxis: yAxis,
                    series: series
                };
                return option;
            }
        }
    });

    function splitData(rawData) {
        var categoryData = [];
        var values = [];
        var volumes = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
            volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
        }

        return {
            categoryData: categoryData,
            values: values,
            volumes: volumes
        };
    }

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data.values[i - j][1];
            }
            result.push((sum / dayCount).toFixed(3));
        }
        return result;
    }
</script>
</body>
</html>